<html xmlns:th="http://www.thymeleaf.org">
<div class="layui-card">
    <div class="layui-card-header">
        列表
        <button class="layui-btn layui-btn-xs" style="float: right;margin-top: 11px" id="ADDROLE">
            <i class="layui-icon">&#xe654;</i>新增
        </button>
    </div>
</div>

<table id="demo" lay-filter="test"></table>
<script th:inline="javascript">
    layui.use(['form','layer','jquery','table','element'],function(){
        var table = layui.table;
        var layer = layui.layer;
        var element = layui.element;
        var $ = layui.jquery;
        $('#ADDROLE').click(function(){
            openwindows(/*[[${#httpServletRequest.getContextPath()+'/admin/menu/info'}]]*/,null,$)
        });
        //执行渲染
        table.render({
            elem: '#demo', //指定原始表格元素选择器（推荐id选择器）
            id:"test",
            height: "full",//容器高度
            url:/*[[${#httpServletRequest.getContextPath()+'/admin/menu/pageList'}]]*/,
            method:"post",
            cols: [[
                {field: 'id', title: 'ID', width:80},
                {field: 'name', title: '名称' ,toolbar:"#nametype"},
                {field: 'p_id', title: '上级菜单',toolbar:"#pidtemplet"},
                {field: 'iocclass', title: '图标',toolbar:"#iocclass"},
                {field: 'url', title: 'URL',width:200},
                {field: 'order', title: '排序值'},
                {title:"操作",toolbar:"#operation"}
            ]],
            done: function(res, curr, count){
               /* <![CDATA[*/
                var l = res.data.length;
                var data = res.data;
                for(var i = 0 ; i < l ; i++){
                    if(data[i].p_id != 0){
                        $(".layui-table").find("tr").eq(i+1).addClass("layui-hide").addClass("p_id"+data[i].p_id)
                    }else{
                        $(".layui-table").find("tr").eq(i+1).data("dataset",data[i]).addClass("p_id")
                    }
                }
                $(".p_id").find("td:not(:last-child)").click(function(){
                    var d = $(this).parent().data("dataset");
                    $(".p_id"+d.id).toggleClass("layui-hide");
                })
                /* ]]>*/

            }
        });
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event=="edit"){
                openwindows(/*[[${#httpServletRequest.getContextPath()+'/admin/menu/info'}]]*/,{id:data.id},$)
            }else if(obj.event=="del"){
                layer.confirm('是否删除该数据？如果子级菜单则删除失败', {
                    btn: ['确定', '取消']
                }, function(index, layero){
                    ajaxUtil(/*[[${#httpServletRequest.getContextPath()+'/admin/menu/delMenu'}]]*/,{id:data.id},function() {
                        layer.alert('操作成功', {icon: 2});
                    });
                    layer.close(index)
                }, function(index){
                    layer.close(index);
                });
            }
        })

    })
    var p_idList="";
    function setP_idList(p_id){
        p_idList = p_id;
        return "无";
    }
    function getP_idList(){
        return p_idList;
    }
</script>

<script type="text/html" id="pidtemplet">
       {{#      if(d.p_id==0){      }}
       {{  setP_idList(d.name)  }}
       {{#     }else if(d.p_id!=0){  }}
       {{  getP_idList()    }}
       {{#     }       }}
</script>

<script type="text/html" id="nametype">
    {{#     if(d.p_id==0){   }}
    <i class="layui-icon" >&#xe623;</i>{{d.name}}
    {{#     }else{   }}
    &emsp;<i class="layui-icon" >&#xe623;</i>{{d.name}}
    {{#    }     }}
</script>
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="iocclass">
    <i class="layui-icon">{{d.iocclass}}</i>
</script>
</html>